<template>
	<view class="student">
		<u-navbar :border-bottom="false" title="学员管理"></u-navbar>
		<!-- <view class="search">
			<u-search placeholder="搜索学员姓名" v-model="keyword" @search="init" @clear="init" :show-action="false" placeholder-color="#C0C4CC" search-icon-color="#C0C4CC"></u-search>
		</view> -->
		<view class="part01 acea-row row-middle row-between">
			<!-- <view class="tabs">
				<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange" font-size="28" bar-width="32" bar-height="8" active-color="#1661FF" :bar-style="{borderRadius:'8rpx',background:'linear-gradient(90deg,#1661ff 0%, rgba(22,97,255,0.00) 100%);'}"></u-tabs>
			</view> -->
			<view class="search" style="width: 600rpx;">
				<u-search placeholder="搜索学员姓名" v-model="keyword" @search="init" @clear="init" :show-action="false" placeholder-color="#C0C4CC" search-icon-color="#C0C4CC"></u-search>
			</view>
			<view class="filter acea-row row-middle">
				<text>筛选</text>
				<image src="../../static/images/student-filter.png" mode=""></image>
			</view>
			<u-dropdown :style="'z-index: '+dropdownZIndex+';'" ref="uDropdown" class="dropdown" @open="dropdownOpen" @close="dropdownClose">
				<u-dropdown-item>
					<view class="dropdown-content">
						<scroll-view scroll-y class="content">
							<view class="item acea-row row-column">
								<view class="title">班级(可多选)</view>
								<view class="checkbox acea-row">
									<view class="checkbox-item line1" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in checkboxList" :key="index" @click="checkboxHandle(item.id)">
										{{item.name}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="footer acea-row row-middle">
							<view class="btn btn1" @click="reset">清空</view>
							<view class="btn btn2" @click="confirm">完成</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="list acea-row row-column" :style="'min-height:100vh;z-index: '+listZIndex+';'" v-if="studentList.length != 0">
			<view>
				<view class="item acea-row row-column" v-for="(item,index) in studentList" :key="index" @click="common.go('/pages/pack/index/studentDetail?id='+item.id)">
					<view class="name acea-row row-middle">
						<text>{{item.name}}</text>
						<view class="tag" :class="item.status == 1?'reading':'history'">{{item.status == 1?'在读':'历史'}}</view>
					</view>
					<view class="classTitle">{{item.bjname?item.bjname:'无班级'}}</view>
					<view class="info acea-row row-middle">
						<text v-if="item.left_lession.left_lession != null">剩余课时：{{item.left_lession.left_lession}}课时</text>
						<text v-if="item.left_lession.left_day != null">剩余天数：{{item.left_lession.left_day}}天</text>
					</view>
					<view class="liaotian" @click.stop="common.go('/pages/index/liaotian?roomId='+item.xlchatid+'&studentName='+item.name)">
						沟通
						<view v-if="item.unread>0" class="dot"></view>
					</view>
				</view>
				<u-loadmore :status="status" style="margin-top: 32rpx;display: block;" />
			</view>
		</view>
		<u-empty text="暂无学员" mode="list" v-else margin-top="32"></u-empty>
		<view class="commonFooter"></view>
	</view>
</template>

<script>
	import common from '../../api/common.js'
	import request from '../../api/request.js'
	const app = getApp();
	export default {
		data(){
			return{
				common,
				studentList:[],
				tabCurrent:0,
				status:'loadmore',
				page: 1,
				limit:10,
				classTimeMin:"",
				classTimeMax:"",
				timeMin:'',
				timeMax:'',
				timeMod:'', // 此时时间选择的mod
				keyword:'',
				showTimePicker:false,
				tabList:[{
					name: '全部'
				}, {
					name: '在读'
				}, {
					name: '历史',
				}],
				checkboxList:[], //班级list
				timePickerParams:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				dropdownZIndex:-1,
				listZIndex:100,
			}
		},
		mounted() {
			setTimeout(()=>{
				this.dropdownZIndex = 5
			},800)
			
		},
		created() {
			this.init()
		},
		methods:{
			init(){
				this.studentList = []
				this.page = 1
				if(this.checkboxList.length == 0){
					this.getClass()
				}else{
					this.getStudentList()
				}
			},
			getStudentList(){
				this.status = 'loading';
				let f = this.checkboxList.filter(e=>e.isCheck)
				let data = {
					page:this.page,
					limit:this.limit
				}
				if(f.length != 0){
					data.banji_id = ''
					for(let i of f){
						data.banji_id += ',' + i.id
					}
					data.banji_id = data.banji_id.substring(1,data.banji_id.length)
				}
				if(this.keyword != ""){
					data.search = this.keyword
				}
				if(this.tabCurrent != 0){
					data.status = this.tabCurrent
				}
				request.go((e)=>{
					this.status = 'loadmore';
					if(e.data.length == 0){
						this.status = 'nomore'
					}else{
						this.studentList = this.studentList.concat(e.data)
						this.watchUnReadList()
					}
				},'/student',data,'POST')
			},
			watchUnReadList(){
				// 监听unReadList变化
				const self = this;
				let studentList = JSON.parse(JSON.stringify(self.studentList))
				let setStudentList = (data,e)=>{
					// console.log('setStudentList',data,e)
					for(let i of data){
						// console.log(i,data,e)
						let fUnRead = e.find(p=>p.groupId == i.xlchatid)
						if(fUnRead){
							i.unread = fUnRead.unread
						}else{
							i.unread = 0
						}
					}
					self.studentList = data
				}
				setStudentList(studentList,app.globalData.unReadList)
				app.globalData.watchUnReadList(app,(e)=>{
					// console.log("app.globalData.watchUnReadList",e)
					setStudentList(studentList,e)
				})
			},
			getClass(){
				let data = {
					limit:9999
				}
				request.go((e)=>{
					for(let i of e.data.list){
						i.isCheck = false
					}
					this.checkboxList = e.data.list
					this.getStudentList()
				},'/Banji/index',data,'POST')
			},
			confirm(){
				this.studentList = []
				this.page = 1
				this.getStudentList()
				this.$refs.uDropdown.close()
			},
			reset(){
				let checkboxList = this.checkboxList
				for(let i of checkboxList){
					i.isCheck = false
				}
				this.classTimeMin=""
				this.classTimeMax=""
				this.timeMin=''
				this.timeMax=''
			},
			checkboxHandle(id){
				let checkboxList = this.checkboxList
				checkboxList.find(e=>e.id == id).isCheck = !checkboxList.find(e=>e.id == id).isCheck
			},
			openPiceker(mod){
				this.timeMod = mod
				this.showTimePicker = true
			},
			timePickerConfirm(e){
				let time = e.year + '-' + e.month + '-' + e.day
				console.log(time)
				if(this.timeMod === 'min'){
					this.timeMin = time
				}else{
					this.timeMax = time
				}
			},
			dropdownOpen(){
				this.listZIndex = ""
			},
			dropdownClose(){
				setTimeout(()=>{
					this.listZIndex = 100
				},400)
			},
			tabChange(e){
				this.studentList = []
				this.page = 1
				this.tabCurrent = e
				this.getStudentList()
			}
		},
		onReachBottom() {
			if(this.status == "loadmore"){
				this.page = ++ this.page;
				this.getStudentList()
			}
		},
	}
</script>

<style scoped>
	.student{
		min-height: 100vh;
		background-color: #F7F8FA;
	}
	.student .search{
		padding: 16rpx 32rpx;
		background-color: #FFFFFF;
		z-index: 10;
	}
	.student .part01{
		box-sizing: border-box;
		padding-right: 36rpx;
		background-color: #FFFFFF;
		padding-bottom: 10rpx;
		position: relative;
	}
	.student .part01 .dropdown{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.student .part01 .dropdown .dropdown-content{
		background-color: #FFFFFF;
	}
	.student .part01 .dropdown .dropdown-content .content{
		padding: 32rpx;
		box-sizing: border-box;
		max-height: 600rpx;
		/* overflow-y: auto; */
		overflow: hidden;
		margin-bottom: 32rpx;
	}
	.student .part01 .dropdown .dropdown-content .content .item{
		margin-bottom: 32rpx;
	}
	.student .part01 .dropdown .dropdown-content .content .item .title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.student .part01 .dropdown .dropdown-content .content .item .checkbox .checkbox-item{
		width: 218rpx;
		height: 64rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		margin-right: 16rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		margin-bottom: 16rpx;
		padding: 0 10rpx;
	}
	.student .part01 .dropdown .dropdown-content .content .item .checkbox .checkbox-item.checkbox-item-active{
		color: #1661ff;
		background: #e6f2ff;
	}
	.student .part01 .dropdown .dropdown-content .content .item .checkbox .checkbox-item:nth-child(3n){
		margin-right: 0rpx;
	}
	.student .part01 .dropdown .dropdown-content .content .item .inputView{
		
	}
	.student .part01 .dropdown .dropdown-content .footer{
		border-top: 2rpx solid #ebedf0;
	}
	.student .part01 .dropdown .dropdown-content .footer .btn{
		width: 50%;
		height: 96rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: CENTER;
		line-height: 96rpx;
	}
	.student .part01 .dropdown .dropdown-content .footer .btn.btn1{
		color: #1f2329;
		background-color: #FFFFFF;
	}
	.student .part01 .dropdown .dropdown-content .footer .btn.btn2{
		color: #ffffff;
		background-color: #1661FF;
	}
	.student .part01 .tabs{
		width: 400rpx;
		padding-right: 200rpx;
		z-index: 10;
		position: relative;
		box-sizing: content-box;
	}
	.student .part01 .filter text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-right: 10rpx;
	}
	.student .part01 .filter image{
		width: 32rpx;
		height: 32rpx;
	}
	.student .search .filter text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-right: 10rpx;
	}
	.student .search .filter image{
		width: 32rpx;
		height: 32rpx;
	}
	.student .list{
		position: relative;
		overflow: hidden;
	}
	.student .list .item{
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin: 32rpx auto 0;
		padding: 32rpx 0 32rpx 32rpx;
		position: relative;
	}
	.student .list .item .liaotian{
		width: 116rpx;
		height: 52rpx;
		background: #1661ff;
		border-radius: 8rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #ffffff;
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		letter-spacing: 5rpx;
	}
	.student .list .item .liaotian .dot{
		position: absolute;
		right: 0;
		top: 0;
		width: 20rpx;
		height: 20rpx;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(40%,-40%);
		background-color: #D02129;
		border-radius: 50%;
	}
	.student .list .item .name{
		margin-bottom: 16rpx;
	}
	.student .list .item .name text{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
		display: block;
		margin-right: 24rpx;
	}
	.student .list .item .name .tag{
		width: 60rpx;
		height: 38rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		line-height: 38rpx;
		text-align: center;
	}
	.student .list .item .name .tag.reading{
		background: #e6f2ff;
		color: #1661ff;
	}
	.student .list .item .name .tag.history{
		background: #f7f8fa;
		color: #8f959e;
	}
	.student .list .item .classTitle{
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 42rpx;
		margin-bottom: 16rpx;
	}
	.student .list .item .info text{
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
	}
	.student .list .item .info text:nth-child(1){
		margin-right: 48rpx;
	}
</style>
